<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <inputs></inputs>
        <neiro></neiro>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let inputs = {
            template: `<div>
                    <input type="text" @keyup.13="handler" v-model='ipt'>
                    <button @click="">提交</button>
                </div>`,
            data() {
                return {
                    ipt: '',
                }
            },
            methods: {
                handler() {
                    console.log(22);
                    bus.$emit('msg', this.ipt)
                        this.ipt = ''
                }
            }
        }
        let neiro = {
            template: `<div>
                <h3>进行中</h3>
                    <div v-for="item in unfinishlist" >
                        <input type="checkbox" @click.prevent="handlerCheck(item)">
                        {{item.contents}}
                        <button @click="del(item)">删除</button>
                    </div>
                <h3>以完成</h3>
                    <div  v-for="item in finishlist">
                        <input type="checkbox" checked @click.prevent="handlerCheck(item)">
                        {{item.contents}}
                        <button @click="del(item)">删除</button>
                    </div>
                </div>`,
            data() {
                return {
                    // ipt:'',
                    list: [
                        {
                            id: 0,
                            contents: '干饭',
                            isCheck: false
                        },
                        {
                            id: 1,
                            contents: '睡觉',
                            isCheck: true
                        }
                    ],

                }
            },
            created() {
                bus.$on('msg', (data) => {
                    this.list.push({
                        id: this.list.length,
                        contents: data,
                        isCheck: false
                    })
                    })
            },
            methods: {
                handlerCheck(item) {
                    this.list[item.id].isCheck = !item.isCheck
                },
                del(item) {
                    this.list.splice(item.id, 1)
                    //因为删除之后，id是不会动态的变化
                    //重新排序，给id动态赋值, 为了后续删除
                    this.list.forEach((ele, idx) => {
                        ele.id = idx
                    });
                }
            },
            computed: {
                unfinishlist() {
                    return this.list.filter(ele => ele.isCheck === false)
                },
                finishlist() {
                    return this.list.filter(ele => ele.isCheck === true)
                }
            },
        }
        let bus = new Vue()
        let vm = new Vue({
            el: '#app',
            components: {
                inputs,
                neiro,
            },
            data: {
            }
        })
    </script>
</body>

</html>